<template>
  <div class="Index">
    <Header :zIndex="1" ref="Header"></Header>
    <!-- 主页轮播图 -->
    <div class="banner">
      <el-carousel height="750px">
        <el-carousel-item v-for="(item, index) in Banner" :key="index">
          <a :href="item.url ? item.url : '#/Create'"><img :src="item.image" alt="" style="display:block; margin:0 auto"></a>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="IndexContent">
      <div class="characteristic">
        <div class="characteristic-list">
          <div class="item">
            <img src="../assets/img/characteristic1.png" alt="安全性">
            <p class="title">安全性</p>
            <p class="tip">系统服务器依托腾讯云强大的云计算和CDN加速等服务；自主研发加密通讯，防破解；自研加密算法，有效防止作弊</p>
          </div>
          <div class="item">
            <img src="../assets/img/characteristic2.png" alt="稳定性">
            <p class="title">稳定性</p>
            <p class="tip">云服务器集群+云数据库大并发架构，带宽足，能够支持上亿级别高并发的大型活动稳定举行</p>
          </div>
          <div class="item">
            <img src="../assets/img/characteristic3.png" alt="防刷票">
            <p class="title">防刷票</p>
            <p class="tip">数据建模投票行为，大数据计算，可有效防止各种刷票作弊行为，可拦截90%以上的水军和99%以上的机器刷票，保障活动公平公正</p>
          </div>
        </div>
        <!-- 微信投票平台模块 -->
        <div class="characteristic-cont">
          <div class="head">
            <div>
              <p>安全、稳定、专业的微信投票平台</p>
            </div>
            <p class="tip">多种投票类型，多种投票逻辑，自定义配置模板，多种场景模板随心选择</p>
          </div>
          <!-- 投票 -->
          <div class="list">
            <div class="item" @mouseenter="listPageMouse(1)">
              <div class="list-bg">
                <img src="../assets/img/characteristic-cont-bg1.png" alt="" class="bg-img">
                <div class="box">
                  <img src="../assets/img/characteristic-cont-1.png" alt="">
                  <p class="title">多种投票类型</p>
                </div>
              </div>
              <div :class="listPageIndex == 1 ? 'list-page list-page-w' : 'list-page'">
                <p class="title">多种投票类型</p>
                <div class="list-page-box">
                  <p class="type">
                    <span>根据客户的行业类型及营销诉求，提供全方位的解决方案</span>
                  </p>
                  <p class="type">
                    <span>图文投票活动、视频投票活动、多分组投票活动、在线自助报名活动、多赛区投票活动、晋级赛投票活动、专题投票活动</span>
                  </p>
                  <el-link class="link_create" type="primary" href="/create">免费创建 <i class="el-icon-right"></i></el-link>
                </div>
              </div>
            </div>
            <div class="item" @mouseenter="listPageMouse(2)">
              <div class="list-bg">
                <img src="../assets/img/characteristic-cont-bg2.png" alt="" class="bg-img">
                <div class="box">
                  <img src="../assets/img/characteristic-cont-2.png" alt="">
                  <p class="title">自定义配置模板</p>
                </div>
              </div>
              <div :class="listPageIndex == 2 ? 'list-page list-page-w' : 'list-page'">
                <p class="title">自定义配置模板</p>
                <div class="list-page-box">
                  <p class="type">
                    <span>投票类型多样，界面元素丰富，功能满足企业多种需求</span>
                  </p>
                  <p class="type">
                    <span>单选投票、多选投票、必选投票、固定次数、周期次数</span>
                  </p>
                  <p class="type">
                    <span>自定义配置页面的轮播图、模板、主题色、背景音乐、选手边框、漂浮物、页面背景图</span>
                  </p>
                  <el-link class="link_create" type="primary" href="/create">免费创建 <i class="el-icon-right"></i></el-link>
                </div>
              </div>
            </div>
            <div class="item" @mouseenter="listPageMouse(3)">
              <div class="list-bg">
                <img src="../assets/img/characteristic-cont-bg3.png" alt="" class="bg-img">
                <div class="box">
                  <img src="../assets/img/characteristic-cont-3.png" alt="">
                  <p class="title">多种场景模板选择</p>
                </div>
              </div>
              <div :class="listPageIndex == 3 ? 'list-page list-page-w' : 'list-page'">
                <p class="title">多种场景模板选择</p>
                <div class="list-page-box">
                  <p class="type">
                    <span>活动类型丰富，功能全面，操作简单</span>
                  </p>
                  <p class="type">
                    <span>涵盖在线报名、图片和视频投票、多选或单选投票、几十套模版随心换、丰富的自定义配置、多种投票逻辑、快速创建、实时预览、批量添加选手</span>
                  </p>
                  <el-link class="link_create" type="primary" href="/create">免费创建 <i class="el-icon-right"></i></el-link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 平台优势 -->
      <div class="advantage">
        <div class="advantage-cont">
          <div class="head">
            <p class="title">核心优势</p>
            <p class="tip">
              专业微信投票平台，更懂安全、更懂客户，为客户提供优质服务
            </p>
          </div>
          <div class="advantage-list">
            <div class="item" v-for="(item,index) in advantage" :key="index">
              <div class="item-page">
                <div class="img">
                  <img :src="item.img" :alt="item.title" />
                </div>
                <p class="title">{{item.title}}</p>
                <p class="tip">{{item.tip}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 适用场景 -->
      <div class="scene">
        <div class="head">
          <p class="title">适用场景</p>
          <p class="tip">服务于数万家大小企业，为多个行业，多家企业提供可行的解决方案</p>
        </div>
        <div class="scene-cont">
          <div class="scene-nav">
            <p :class="sceneIndex == index ? 'nav-item nav-item-lpoll nav-item-active' : 'nav-item nav-item-lpoll'" v-for="(item,index) in scene" :key="index" @mouseenter="sceneMouse(index)">{{item.title}}</p>
          </div>
          <div class="scene-cont-box">
            <div class="scene-cont-list">
              <div class="left-img left-img1">
                <img :src="scene[sceneIndex].img" alt="scene[sceneIndex].title" />
              </div>
              <div class="right-text right-text1">
                <div class="box">
                  <img src="../assets/img/tip.png" alt="" />
                  <p class="title">{{scene[sceneIndex].title}}</p>
                  <p class="tip">{{scene[sceneIndex].tip}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择原因 -->
    <div class="choice choice-lpoll">
      <div class="head">
        <p class="title">为什么选择筋斗云投票</p>
        <p class="tip">专业技术、优质服务、功能齐全、操作简单，提供专业的解决方案，领先的产品</p>
      </div>
      <div class="choice-cont">
        <div class="choice-icon-list">
          <div :class="choiceIndex == index ? 'item item-active' : 'item'" v-for="(item,index) in choiceData" :key="index" @mouseenter="choiceMouse(index)">
            <div class="item-icon">
              <svg viewBox="0 0 30 36" class="svg-icon" style="color: #fff">
                <path :d="item.path" :transform="item.tranf" :fill="choiceIndex == index ? '#0078ff' : '#ffffff'">
                </path>
              </svg>
            </div>
            <p class="title">{{item.title}}</p>
          </div>
        </div>
        <div class="choice-type-list">
          <div class="sanjiao" :style="'left:' + choiceData[choiceIndex].left"></div>
          <div class="list">
            <div class="list-item">
              <p class="type" v-for="(item,index) in choiceData[choiceIndex].list" :key="index"><span>•</span>{{item}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 安全问题 -->
    <div class="serve">
      <p class="title">安全、稳定的一站式托管运营微信投票平台</p>
      <router-link :to="{path:'/Create'}" rel="nofollow" data-agl-cvt="5" convert_id="1676527850489864" class="Ahref serve-href btn-hover1">创建活动</router-link>
    </div>
    <!-- 遮罩层 -->
    <div class="maskbox" v-if="Popup">
      <div class="poster">
        <span @click="Popup = false"></span>
        <img :src="PopImg" @click="$router.push('/login')" />
      </div>
    </div>
    <!-- 底部组件 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../components/Footer.vue'
import Header from '../components/Header.vue'
import Ajax from '../../utils/ajax'
import User from '../../utils/user'
export default {
  name: 'Index',
  components: {
    Header,
    Footer
  },
  data() {
    return {
      Banner: [],
      Popup: false,
      PopImg: '',
      listPageIndex: 1,
      advantage: [
        {
          img: require('@/assets/img/advantage0.png'),
          title: '平台扩展性强',
          tip: '可根据主办方活动类型配置定制专属服务器以及带宽，可有效防止活动数据过大，访问人数过多造成服务器崩溃'
        },
        {
          img: require('@/assets/img/advantage1.png'),
          title: '数据安全保障',
          tip: '自主研发的加密算法机制，保证数据传输安全'
        },
        {
          img: require('@/assets/img/advantage2.png'),
          title: '详细的数据统计',
          tip: '每次投票都有详细的微信、投票地区、投票时间、投票IP记录'
        },
        {
          img: require('@/assets/img/advantage3.png'),
          title: '类型丰富',
          tip: '图文投票、视频投票、多分组投票、在线自助报名、多赛区投票、晋级赛投票、专题投票'
        },
        {
          img: require('@/assets/img/advantage4.png'),
          title: '功能强大',
          tip: '多种排序方式、多种展现方式、丰富的页面元素、批量添加选手、丰富的模板、广告支持、多种投票逻辑等'
        },
        {
          img: require('@/assets/img/advantage5.png'),
          title: '服务支持',
          tip: '为主办方提供活动策划方案、活动宣传方案、广告投放等服务支持'
        },
        {
          img: require('@/assets/img/advantage6.png'),
          title: '服务器稳定性',
          tip: '强大的服务器集群，保障活动的安全性、稳定性 '
        },
        {
          img: require('@/assets/img/advantage7.png'),
          title: '多重防刷',
          tip: '平台云数据建模投票行为、自研加密算法、多重智能防刷机制'
        },
        {
          img: require('@/assets/img/advantage8.png'),
          title: '界面元素丰富',
          tip: '支持自定义页面的轮播图、模板、主题色、背景音乐、选手边框、漂浮物、页面背景图'
        },
        {
          img: require('@/assets/img/advantage9.png'),
          title: '多种投票方式',
          tip: '单选、多选、必选投票，固定次数、周期次数投票'
        }
      ],
      sceneIndex: 0,
      scene: [
        {
          img: require('@/assets/img/scene1.png'),
          title: '通用解决方案',
          tip: '图文投票活动、视频投票活动、多分组投票活动、在线自助报名活动、多赛区投票活动、晋级赛投票活动、专题投票活动'
        },
        {
          img: require('@/assets/img/scene2.png'),
          title: '事业单位',
          tip: '智慧监管典型案例评选、建筑企业100强评选、最美一条街评选、“奥迪杯”少儿钢琴大赛评选、十佳服务窗口、十佳服务之星、最美劳动者、十大最美村镇、十大最美医师评选、感动人物评选活动、优秀教师评选'
        },
        {
          img: require('@/assets/img/scene3.png'),
          title: '金融',
          tip: '十大经济年度人物、经济影响力人物评选、新三板最具投资价值评选、年度跨境电商行业最具人气企业网络投票、十佳银行理财师大赛、理财经理“最美形象”评选、金融业十佳宣传手'
        },
        {
          img: require('@/assets/img/scene4.png'),
          title: '教育',
          tip: '十大师德楷模、感动校园”十大人物、年度最佳教师、最美人民教师、在线教育百强评选、全国青少年经典诵读评选、高校大数据年度投票评选、十佳少先队员、十佳阅读之星、萌宝大赛评选'
        },
        {
          img: require('@/assets/img/scene5.png'),
          title: '医疗',
          tip: '最美逆行者、最美抗疫巾帼人物、十佳“健康卫士”评选、医院“十大名医”评选、最美护士评选、最美医生评选、百姓信赖医师评选活动、青年医师标兵评选、白衣天使系列评选、最美公卫医生、医疗药品评选'
        },
        {
          img: require('@/assets/img/scene6.png'),
          title: '建筑',
          tip: '商业地产「金孔雀奖」人物类评选、地产经理人100强评选、十佳人气楼盘评选、地产金厦奖评选、人气口碑楼盘、地产圈劳模评选、十大杰出地产经理人、十佳工匠评选、技能大赛评选、房地产年度之星评选'
        },
        {
          img: require('@/assets/img/scene7.png'),
          title: '集团企业',
          tip: '社会责任感企业(企业家)”宣传评选活动、十大优秀民营企业家评选、年度优秀物业服务企业、全国金属板材优质加工企业评选活动、全民海选十佳重质量优秀医药企业、年度风云杭商、新锐杭商网络评选活动'
        },
        {
          img: require('@/assets/img/scene8.png'),
          title: '行业协会',
          tip: '中国食文化节约型餐饮企业投票评选、工会摄影摄像大赛、计划生育协会 “最美协会人”评选、地区商会十佳商户评选、十佳品牌评选、行业协会年度领军企业评选'
        },
        {
          img: require('@/assets/img/scene9.png'),
          title: '大型活动',
          tip: '全国少儿歌曲大赛、庆祝40周年歌曲征集活动歌词投票、高校英文歌曲大赛、地区好声音评选、《少儿迎春晚会》投票、《我要上春晚》网络投票'
        }
      ],
      choiceIndex: 0,
      choiceData: [
        {
          path: 'M3687,4027a8.181,8.181,0,1,0,8.33,8.18A8.255,8.255,0,0,0,3687,4027h0Zm0,19.64c-8.28,0-15,3.66-15,8.18s6.72,8.18,15,8.18,15-3.67,15-8.18-6.72-8.18-15-8.18h0Z',
          tranf: 'translate(-3672 -4027)',
          title: '用户群体庞大',
          left: '50px',
          list: [
            '30万客户，5万家企业，举办中大型活动上百万场',
            '备受客户信赖，更懂客户需求',
            '累计千亿次访问数',
            '率先感知全网热点，提供解决方案'
          ]
        },
        {
          path: 'M3975.96,4047.17v-14a1.19,1.19,0,0,0-1.16-1.34h-1.33a21.28,21.28,0,0,1-5.83-1.33,22.274,22.274,0,0,1-5.16-2.67l-0.83-.66a3.941,3.941,0,0,0-.67-0.17,0.969,0.969,0,0,0-.66.17l-0.84.66a32.916,32.916,0,0,1-5.16,2.67,15.376,15.376,0,0,1-5.82,1.33h-1.33a1.292,1.292,0,0,0-1.17,1.34v14c0,3.5,2,7.5,5.49,10.83,3.17,3.17,6.83,5,9.66,5,2.66,0,6.49-2,9.65-5C3974.3,4054.67,3976.3,4050.67,3975.96,4047.17Zm-4.99-6.5-10.65,10.66a2.114,2.114,0,0,1-1.5.67,1.469,1.469,0,0,1-1.33-.83l-5.33-5.34a2.115,2.115,0,0,1-.67-1.5,2.041,2.041,0,0,1,.67-1.5,1.918,1.918,0,0,1,2.83,0l3.83,3.84,9.15-9.17a1.917,1.917,0,0,1,2.83,0,2.076,2.076,0,0,1,.67,1.5A2.25,2.25,0,0,1,3970.97,4040.67Z',
          tranf: 'translate(-3946 -4027)',
          title: '投票公平公正',
          left: '320px',
          list: [
            '基础防刷设置，针对投票场景不同，分别从时间、地区、IP三方面进行投票限制',
            '系统自动对选手票数，增长速度进行实时监测，智能判断选手是否有刷票嫌疑',
            '自研安全验证码，智能识别真人投票与机器刷票',
            '自研数据加密系技术，有效防止99%的黑客破解',
            '自建平台微信云黑名单数据库，加入微信云黑名单'
          ]
        },
        {
          path: 'M4236,4030a15,15,0,1,0,15,15A15.005,15.005,0,0,0,4236,4030Zm8.1,11.63-9.16,9.17a1.752,1.752,0,0,1-1.22.5,1.709,1.709,0,0,1-1.22-.5l-4.6-4.61a1.7,1.7,0,0,1,0-2.43,1.72,1.72,0,0,1,2.43,0l3.39,3.39,7.95-7.95a1.732,1.732,0,0,1,2.44,0A1.711,1.711,0,0,1,4244.1,4041.63Z',
          tranf: 'translate(-4221 -4030)',
          title: '简单操作',
          left: '590px',
          list: [
            '一键创建投票活动',
            '模板丰富，可以一键切换模板的设计风格',
            '自定义设置页面元素',
            '实时预览活动，提供流畅的用户体验',
            '可从EXCEL批量导入选手，快速对接原有数据'
          ]
        },
        {
          path: 'M4525.91,4042.66a14.719,14.719,0,0,0-13.21-12.6,15.55,15.55,0,0,0-11.7,3.56,14.037,14.037,0,0,0-5,10.67c0,2.92,2.19,7.03,2.98,8.42l-0.74,4.51a2.347,2.347,0,0,0,.85,2.2,2.607,2.607,0,0,0,1.64.58,2.85,2.85,0,0,0,.76-0.11l5.79-1.76a23.07,23.07,0,0,0,3.72.47,15.37,15.37,0,0,0,11.18-4.77A13.965,13.965,0,0,0,4525.91,4042.66Zm-21.92,3.32a1.447,1.447,0,0,1,2.8-.7,4.411,4.411,0,0,0,8.46,0,1.409,1.409,0,0,1,1.39-.99,1.392,1.392,0,0,1,1.42,1.69A7.346,7.346,0,0,1,4503.99,4045.98Z',
          tranf: 'translate(-4496 -4029.97)',
          title: '7*24小时服务',
          left: '860px',
          list: [
            '专业的业务咨询团队7x24小时全天在线，提供优质服务',
            '第一时间为客户排疑解难，并给出适合客户活动的方案策划'
          ]
        },
        {
          path: 'M4780.79,4048.12h-7.58a2.2,2.2,0,0,0-2.21,2.19v7.5a2.2,2.2,0,0,0,2.21,2.19h7.58a2.2,2.2,0,0,0,2.22-2.19v-7.5a2.2,2.2,0,0,0-2.22-2.19h0Zm0-15.9h-7.58a2.2,2.2,0,0,0-2.21,2.19v7.5a2.2,2.2,0,0,0,2.21,2.19h7.58a2.2,2.2,0,0,0,2.22-2.19v-7.5a2.2,2.2,0,0,0-2.22-2.19h0Zm15.98,15.9h-7.58a2.209,2.209,0,0,0-2.22,2.19v7.5a2.2,2.2,0,0,0,2.22,2.19h7.58a2.2,2.2,0,0,0,2.21-2.19v-7.5a2.213,2.213,0,0,0-2.21-2.19h0Zm3.58-12.17-5.36-5.31a2.245,2.245,0,0,0-3.15,0l-5.37,5.31a2.2,2.2,0,0,0,0,3.11l5.37,5.31a2.264,2.264,0,0,0,3.15,0l5.36-5.31a2.179,2.179,0,0,0,0-3.11h0Z',
          tranf: 'translate(-4771 -4030)',
          title: '多种解决方案',
          left: '1130px',
          list: [
            '针对各个行业各个使用场景有不同的模板以及解决方案，满足不同行业需求',
            '平台有经验丰富的模板制作团队，紧追时事热点，不断扩充模板库',
            '为活动主办方提供活动策划以及宣传方案、广告投放支持'
          ]
        }
      ]
    }
  },
  created() {
    this.setTitle('微信投票_免费网络评选系统')
    this.getConfig()

    User.saveRef()
  },
  methods: {
    getConfig() {
      Ajax.get('common/webconfig')
        .then((res) => {
          if (res.code == 0) {
            if (res.data) {
              this.Banner = res.data.banners
              if (res.data.popimg && User.getInfo() == null) {
                setTimeout(() => {
                  this.Popup = true
                  this.PopImg = res.data.popimg
                }, 2000)
              }
            }
          }
        })
        .catch((err) => {
          console.error(err)
        })
    },
    listPageMouse(e) {
      this.listPageIndex = e
    },
    sceneMouse(e) {
      this.sceneIndex = e
    },
    choiceMouse(e) {
      this.choiceIndex = e
    },
    goCreate() {
      this.$router.push({ path: '/Create' })
    }
  }
}
</script>
<style src="@/assets/css/index.css"  scoped></style>
